<template>
  <div>
    <el-dialog
      title="查看达人"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"

      top="70px"
    >
      <div class="dialogBody">
        <div class="lineTitle">
          <div class="line"></div>
          <span>达人信息</span>
        </div>
        <div class="padContent">
          <div>
            <span class="item_lable">姓名：</span>
            {{ detailsInfo?.user?.userName }}
          </div>
          <div>
            <span class="item_lable">手机号：</span>
            {{ detailsInfo?.user?.mobile }}
          </div>
          <div>
            <span class="item_lable">年龄：</span>
            {{ detailsInfo?.user?.age }}
          </div>
          <div>
            <span class="item_lable">性别：</span>
            {{ detailsInfo?.user?.sex == 1 ? "男" : "女" }}
          </div>
          <!-- <div>
            <span class="item_lable">身份证号：</span>
            xxx
          </div> -->
          <div>
            <span class="item_lable">身份：</span>
            {{ detailsInfo?.user?.userTypeText }}
          </div>
          <!-- <div>
            <span class="item_lable">住址：</span>
            xxx
          </div> -->
        </div>
        <div class="lineTitle">
          <div class="line"></div>
          <span>申请技能</span>
        </div>
        <div class="padContent">
          <div>
            <span class="item_lable">申请技能：</span>
            {{ detailsInfo.type_name }}
          </div>
          <div>
            <span class="item_lable" style="width: 120px"
              >资质证明或证书：</span
            >
            <!-- <div
              class="photobox"
              v-for="(item, index) in detailsInfo.pics"
              :key="index"
            >
              <img
                class="photo"
                width="112"
                height="112"
                :src="'https://guangde.judaiot.com/' + item"
                alt=""
              />
            </div> -->
            <div class="photobox">
              <img
                class="photo"
                width="112"
                height="112"
                :src="detailsInfo.pics"
                alt=""
              />
            </div>
          </div>
          <div>
            <span class="item_lable">认证补充：</span>
            {{ detailsInfo.remark }}
          </div>
          <div>
            <span class="item_lable">申请时间：</span>
            {{ detailsInfo.create_time }}
          </div>
          <!-- <div>
            <span class="item_lable">审核人：</span>
            {{ detailsInfo.reviewer }}
          </div>
          <div>
            <span class="item_lable">认证通过时间：</span>
            {{ detailsInfo.review_date }}
          </div> -->
        </div>
        <div class="lineTitle">
          <div class="line"></div>
          <span>审核情况</span>
        </div>
        <div class="padContent">
          <div>
            <span class="item_lable">审核结果：</span>
            {{
              detailsInfo.status == 2
                ? "通过"
                : detailsInfo.status == 3
                ? "不通过"
                : ""
            }}
          </div>
          <div>
            <span class="item_lable">审核说明：</span>
            {{ detailsInfo.review_remark }}
          </div>
          <div>
            <span class="item_lable">审核人：</span>
            {{ detailsInfo.reviewer }}
          </div>
          <div>
            <span class="item_lable">认证通过时间：</span>
            {{ detailsInfo.review_date }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { talentReviewDetail } from "@/api/talent.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    DeatilId: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      detailsInfo: {},
      activeName: "1",
      form: {
        type: 1,
        activeId: "",
      },
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getdetail();
  },

  methods: {
    getdetail() {
      talentReviewDetail({ id: this.DeatilId }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.detailsInfo = res.data;
          this.detailsInfo.pics = this.detailsInfo.pics?.split(",");
        }
      });
    },
    handleClick() {},
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .padContent {
    margin-top: 10px;
    padding-left: 10px;
    > div {
      margin-bottom: 20px;
      display: flex;
    }
    .item_lable {
      display: inline-block;
      width: 120px;
      text-align: right;
      color: #4f4f4f;
    }
    .skill {
      margin-right: 16px;
      padding: 6px 18px;
      background: rgba(0, 135, 250, 0.1);
      border-radius: 30px 30px 30px 30px;
      border: 1px solid #1890ff;
      font-size: 14px;
      color: #1890ff;
    }
    .photobox {
      display: inline-block;
      display: flex;
      .photo {
        vertical-align: top;
        margin-right: 5px;
      }
    }
  }
  .tableList {
    padding-top: 10px;
    border: 1px solid #e5e5e5;
    .el-tabs {
      height: 20px;
    }
    .tabsBox {
      margin: 0 24px;
    }
    .tablesCard {
      .totalTxt {
        margin-right: 20px !important;
      }
    }
  }
}
</style>
